<!DOCTYPE html>
<html>

<head>
    <title>小球跑步动画</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script>
        // JavaScript 代码将在这里编写
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");
        class Ball {
            constructor(x, y, radius, color) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.velocity = { x: 0, y: 0 };
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }

            update() {
                this.x += this.velocity.x;
                this.y += this.velocity.y;
            }
        }

        class Particle {
            constructor(x, y, radius, color, velocity) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.velocity = velocity;
                this.lifeTime = 100; // 粒子生命周期
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }

            update() {
                this.x += this.velocity.x;
                this.y += this.velocity.y;
                this.lifeTime--;
            }

            isDead() {
                return this.lifeTime < 0;
            }
        }
        const ball = new Ball(50, 50, 10, "red");
        const particles = [];
        function animate() {
            // 清除上一帧
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 更新小球位置和速度
            ball.velocity.y += 0.5; // 重力加速度
            ball.update();

            // 检测小球是否与平面发生碰撞
            if (ball.y + ball.radius > canvas.height) {
                ball.y = canvas.height - ball.radius; // 修正小球位置
                ball.velocity.y = -ball.velocity.y * 0.8; // 反弹

                // 创建粒子效果
                for (let i = 0; i < 20; i++) {
                    const radius = Math.random() * 3 + 1;
                    const color = `rgba(255, 0, 0, ${Math.random() * 0.5 + 0.5})`;
                    const velocityX = Math.random() * 6 - 3;
                    const velocityY = Math.random() * -6 - 2;
                    const velocity = { x: velocityX, y: velocityY };
                    particles.push(new Particle(ball.x, ball.y, radius, color, velocity));
                }
            }

            // 绘制小球
            ball.draw();

            // 绘制粒子
            for (let i = particles.length - 1; i >= 0; i--) {
                const particle = particles[i];
                particle.draw();
                particle.update();

                // 移除死亡粒子
                if (particle.isDead()) {
                    particles.splice(i, 1);
                }
            }

            // 递归调用动画循环
            requestAnimationFrame(animate);
        }

        // 开始动画
        animate();
    </script>
</body>

</html>